<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <link rel="icon" type="image/png" href="https://lulufans-static.oss-cn-shanghai.aliyuncs.com/lulufans-static/images/favicon/favicon.png">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>雫るる| Video</title>
  <link rel="stylesheet" href="https://lulufans-static.oss-cn-shanghai.aliyuncs.com/lulufans-static/vender/layui/css/layui.css">
  <link rel="stylesheet" href="./static/css/base.css">
  <link rel="stylesheet" href="./static/css/titlebar.css">
  <link rel="stylesheet" href="./static/css/video.css">
  <link rel="stylesheet" href="./static/css/nav.css">
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <script src="https://lulufans-static.oss-cn-shanghai.aliyuncs.com/lulufans-static/vender/layui/layui.js"></script>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <style>
    .radius {
      width: 5px;
      height: 5px;
    }

    @media screen and (max-width: 500px) {
      .radius {
        width: 0;
      }
    }
  </style>
</head>

<body>
  <div class="header">
    <div class="layui-container" id="nav_container">
      <div class="logo">
        <img src="./static/images/lulu_logo.png" width="98px" alt="">
      </div>
      <input type="checkbox" id="nav-toggle" class="nav-toggle">
      <label for="nav-toggle" id="mobile-icon">
        <span class="menu-icon">
          <i class="layui-icon layui-icon-app"></i>
        </span>
      </label>
      <div class="page_nav">
        <ul class="layui-nav">
          <li class="layui-nav-item">
            <a href="index.html">首页</a>
            <div class="radius"></div>
          </li>
          <li class="layui-nav-item">
            <a href="personal.html">个人简介</a>
            <div class="radius"></div>
          </li>
          <li class="layui-nav-item ">
            <a href="music.html">音乐</a>
            <div class="radius"></div>
          </li>
          <li class="layui-nav-item layui-this">
            <a href="video.html ">视频</a>
            <div class="radius"></div>
          </li>
          <li class="layui-nav-item ">
            <a href="photo.html ">同人图</a>
            <div class="radius"></div>
          </li>
          <li class="layui-nav-item">
            <a href="meme.html">表情包</a>
            <div class="radius"></div>
          </li>
          <li class="layui-nav-item ">
            <a href="about.html">关于</a>
            <div class="radius"></div>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="layui-container body_container">
    <div id="app">
      <div class="layui-row headline container">
        <div class="layui-col-xs6 layui-col-sm6 layui-col-md12">
          <h1 class="left">视频</h1>
          <h1 class="right">MOVIE</h1>
        </div>
      </div>
      <div class="layui-tab layui-tab-brief tab-bar" lay-filter="docDemoTabBrief">
        <ul class="layui-tab-title">
            <li @click="handleCurrentCatalogChange(null)" v-bind:class="{'layui-this': choseAll}">
                所有
            </li>
            <li v-for="item in catalog" @click="handleCurrentCatalogChange(item.name)" v-bind:class="{'layui-this': item.chosen}">
                {{item.name}}
            </li>
        </ul>
      </div>

      <main class="sortable">
        <div class="container">
          <div class="wrapper">
            <div v-for="item in list" class="sjs-default" style="height: auto;">
              <!-- <div class="card"> -->
                <div class="img_link">
                  <a :href="item.url" target="_blank">
                    <img id="img" class="card__picture" :src="item.coverUrl" alt="">
                  </a>
                </div>
                <div class="card-infos">
                  <h2 class="card__title">{{item.name}}</h2>
                  <div class="tag">
                    <span>{{item.catalog}}</span>
                  </div>
                  <p class="card__text">
                  <p>{{item.desc}}</p>
                  </p>
                </div>
              <!-- </div> -->
            </div>
          </div>
        </div>
      </main>

      <!-- <div class="video-pagination container">
        <el-pagination
            background
            :page-size="pageSize"
            layout="prev, pager, next"
            @current-change="handleCurrentPageChange"
            :total="count">
        </el-pagination>
      </div> -->
      
    </div>
  </div>
  <!-- <div class="layui-container"> -->
  <script type="text/javascript">
    var app = new Vue({
      el: '#app',
      data: {
        catalog: [],
        list: [],
        currentCatalog: null,
        choseAll: true,
        pageSize: 100,
        count: 0,
        apiPrefix: "//back.lulufans.cn:3000/api/v1",
        api: {
          getCatalog: {
            url: "/catalog-list/video"
          },
          getList: {
            url: "/video-list"
          },
        }
      },
      created() {
        this.fetchData()
      },
      methods: {
        fetchData() {
          this.getCatalog();
          this.getList(1);
        },
        getCatalog() {
          axios.get(this.apiPrefix + this.api.getCatalog.url)
            .then(response => {
              this.catalog = response.data.data.rows
            })
            .catch(function (error) {
              console.log(error);
            });
        },
        getList(page) {
            return axios.get(`${this.apiPrefix}${this.api.getList.url}?pageSize=${this.pageSize}&page=${page}`)
                .then(response => {
                    this.count = response.data.data.count
                    this.list = response.data.data.rows
                })
                .catch(function (error) {
                    console.log(error);
                });
        },
        getListByCatalog(page, catalog) {
            return axios.get(`${this.apiPrefix}${this.api.getList.url}?pageSize=${this.pageSize}&page=${page}&catalog=${catalog}`)
                .then(response => {
                    this.count = response.data.data.count
                    this.list = response.data.data.rows
                })
                .catch(function (error) {
                    console.log(error);
                });
        },
        handleCurrentCatalogChange(catalog) {
            this.cruentPage = 1
            if (!catalog) {
                this.choseAll = true
                this.currentCatalog = null
                this.catalog.forEach(e=>{
                    e.chosen = false
                })
                return this.getList(1)
            }
            else {
                this.choseAll = false
                this.currentCatalog = catalog
                this.catalog.forEach(e=>{
                    if (e.name == catalog) {
                        e.chosen = true
                    }
                    else {
                        e.chosen = false
                    }
                })
                return this.getListByCatalog(1, catalog)
            }
        },
        handleCurrentPageChange(cruentPage){
            this.cruentPage = cruentPage;
            if (this.currentCatalog) {
                return this.getListByCatalog(cruentPage, this.currentCatalog);
            }
            else {
                return this.getList(cruentPage);
            }
        }
        
      },
    });

      // layui.use(['element', 'layer'], function () {
      //     var element = layui.element;
      //     var layer = layui.layer;
      // });

      // $(".mobile-icon").click(function () {
      //     $(".page_nav").toggleClass('layui-show');
      // });
      // document.querySelector('#sortable').sortablejs();
      // $()
  </script>
</body>

</html>